 <template>
     <view class="calendar-wrapper">
         <view class="header" v-if="headerBar">
 			<view class="preWidth" @click="changeMonth('pre')">
 				<view class="pre" ></view>
 			</view>
             <view>{{y+'年'+formatNum(m)+'月'}}</view>
 			<view class="nextWidth" @click="changeMonth('next')">
 				<view class="next" ></view>
 			</view>
 		</view>
         <view class="week">
             <view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
         </view>
         <view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
             <view :style="{ top: positionTop + 'rpx' }" class="days">
                 <view class="item" v-for="(item, index) in dates" :key="index" style="position: relative;">
                     <view
                         class="day"
                         @click="selectOne(item, $event)"
                         :class="{
                             choose: choose == `${item.year}-${item.month}-${item.date}`&&item.isCurM,
                             nolm: !item.isCurM,
                             today: isToday(item.year, item.month, item.date),
                             isWorkDay: isWorkDay(item.year, item.month, item.date)
                         }">
                         {{ Number(item.date) }}
						 <image v-if="item.isshow":src="item.src" style="position: absolute;z-index: 2; opacity: 0.5;" class="imgbootms"></image>
                     </view>
                     <view class="markDay" v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
                     <!-- <view class="today-text" v-if="isToday(item.year, item.month, item.date)">今</view> -->
                 </view>
             </view>
         </view>
 		<view class="weektoggle" @click="toggle">
 			<image src="../../static/time/down.png" mode="scaleToFill" v-if="collapsible" v-show="showImg" @click="changeImg"></image>
 			<image src="../../static/time/up.png" mode="scaleToFill" v-if="collapsible" v-show="!showImg" @click="changeImg"></image>
 		</view>
 		<view class="timebootm">
			<view>今日心情</view>
			<view class="showimage">
				<image src="../../static/time/lovely.png" class="imgbootms" v-show="showImgx[0].status"></image>
				<image src="../../static/time/Sosleepy.png" class="imgbootms" v-show="showImgx[1].status"></image>
				<image src="../../static/time/Sad.png" class="imgbootms" v-show="showImgx[2].status"></image>
				<image src="../../static/time/happy.png" class="imgbootms" v-show="showImgx[3].status"></image>
				<image src="../../static/time/anger.png" class="imgbootms" v-show="showImgx[4].status"></image>
			</view>
			<view>
				<image src="../../static/time/lovely.png" class="imgbootm" @click="changeImg1">可爱</image>
				<image src="../../static/time/Sosleepy.png" class="imgbootm" @click="changeImg2">好困</image>
				<image src="../../static/time/Sad.png" class="imgbootm" @click="changeImg3">伤心</image>
				<image src="../../static/time/happy.png" class="imgbootm" @click="changeImg4">开心</image>
				<image src="../../static/time/anger.png" class="imgbootm" @click="changeImg5">愤怒</image>
			</view>
			<view class="showtext">
				随心日记：<input type="text" value="" v-model="content2" @blur="sendInformation" v-if="isShow">
						<text v-if="!isShow">{{content2}}</text>
			</view>
		</view>
 		
         
     </view>
 </template>
 
 <script>
 export default {
     name: 'ren-calendar',
     props: {
         // 星期几为第一天(0为星期日)
         weekstart: {
             type: Number,
             default: 0
         },
         // 标记的日期
         markDays: {
             type: Array,
             default: ()=>{
                 return [];
             }
         },
         // 是否展开
         open: {
             type: Boolean,
             default: true
         },
         //是否可收缩
         collapsible:{
             type: Boolean,
             default: true
         },
         //未来日期是否不可点击
         disabledAfter: {
             type: Boolean,
             default: false
         }
     },
     data() {
         return {
			 isShow:true,
			 alldata:[],
			 content2:null,
             weektext: ['日', '一', '二', '三', '四', '五', '六'],
             y: new Date().getFullYear(), // 年
             m: new Date().getMonth() + 1, // 月
             dates: [], // 当前月的日期数据
             positionTop: 0,
             monthOpen: false, 
             choose: '',
 			headerBar:false,// 月份切换按钮
			showImg:true,
			showImg1:false,
			showImg2:false,
			showImg3:false,
			showImg4:false,
			showImg5:false,
			showImgx:[{status:false,src:"../../static/time/lovely.png"},{status:false,src:"../../static/time/Sosleepy.png"},{status:false,src:"../../static/time/Sad.png"},{status:false,src:"../../static/time/happy.png"},{status:false,src:"../../static/time/anger.png"}]
         };
     },
     created() {
		this.loadData2(this.y, this.m)
         !this.open && this.toggle();
     },
     mounted() {
         this.choose = this.getToday().date;
     },
     computed: {
         // 顶部星期栏
         weekDay() {
             return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
         },
         height() {
             return (this.dates.length / 7) * 80 + 'rpx';
         }
     },
     methods: {
		 
		 
		 sendInformation(){
			 var sendsrc=null
			 var key=0
				for(var i=0;i<=4;i++){
				if(this.showImgx[i].status==true){
					sendsrc=this.showImgx[i].src
					key=i
					break
				}
			}
			
			if(sendsrc!=null&&this.content2!=null){
				var date=Date.now()
				var today=new Date(date)
				var nowtime=today.toISOString()
				this.src=sendsrc
				this.loadData1(sendsrc,this.content2,nowtime,key)
			}
			
			
		 },
		 
		 
		 
         formatNum(num) {
             let res = Number(num);
             return res < 10 ? '0' + res : res;
         },
         getToday() {
             let date = new Date();
             let y = date.getFullYear();
             let m = date.getMonth();
             let d = date.getDate();
             let week = new Date().getDay();
             let weekText = ['日', '一', '二', '三', '四', '五', '六'];
             let formatWeek = '星期' + weekText[week];
             let today = {
                 date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
                 week: formatWeek
             };
             return today;
         },
         // 获取当前月份数据
         monthDay(y,month) {
             let dates = [];
             let m = Number(month);
             let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
             let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
             let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
             let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
			
			
		
			// let hash = {};
			// var newArr = this.alldata.reduce((item, next) => {
			//     hash[next.data] ? '' : hash[next.data] = true && item.push(next);
			//     return item
			// }, []);
			// console.log(222,newArr);
			//  this.alldata=newArr
			 
			 console.log(111,this.alldata)
             let startDay = (() => {
                 // 周初有几天是上个月的
                 if (firstDayOfMonth == weekstart) {
                     return 0;
                 } else if (firstDayOfMonth > weekstart) {
                     return firstDayOfMonth - weekstart;
                 } else {
                     return 7 - weekstart + firstDayOfMonth;
                 }
             })();
             let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
             for (let i = 1; i <= startDay; i++) {
                 dates.push({
                     date: this.formatNum(lastDayOfLastMonth - startDay + i),
                     day: weekstart + i - 1 || 7,
                     month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
                     year: m - 1 >= 0 ? y : y - 1,
					 isshow:false,
					 src:null,
					 content:null
                 });
             }
             for (let j = 1; j <= lastDateOfMonth; j++) {
				 
				 var st=1
					//这里将月和年一起发给后台，后台直接返回当前月中的日期即可然后在，判断
				 this.alldata.forEach((a)=>{
					 if(a.day==j){
						 st=0
						 dates.push({
						     date: this.formatNum(j),
						     day: (j % 7) + firstDayOfMonth - 1 || 7,
						     month: this.formatNum(m),
						     year: y,
						     isCurM: true,
							 src:a.src,
							 content:a.content,
							 isshow:true
						 })
					 }
					 
						
					 
				 })
					if(st==1){
							dates.push({
						     date: this.formatNum(j),
						     day: (j % 7) + firstDayOfMonth - 1 || 7,
						     month: this.formatNum(m),
						     year: y,
						     isCurM: true,//是否当前月份
						 	 isshow:false,
							 src:null,
							 content:null
							})
						 }

				 
             }
             for (let k = 1; k <= endDay; k++) {
                 dates.push({
                     date: this.formatNum(k),
                     day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
                     month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
                     year: m + 1 <= 11 ? y : y + 1,
					 isshow:false
                 });
             }
             // console.log(dates);
             return dates;
         },
         isWorkDay(y, m, d) {
             //是否工作日
             let ymd = `${y}/${m}/${d}`;
             let formatDY = new Date(ymd.replace(/-/g, '/'));
             let week = formatDY.getDay();
             if (week == 0 || week == 6) {
                 return false;
             } else {
                 return true;
             }
         },
         isFutureDay(y, m, d) {
             //是否未来日期
             let ymd = `${y}/${m}/${d}`;
             let formatDY = new Date(ymd.replace(/-/g, '/'));
             let showTime = formatDY.getTime();
             let curTime = new Date().getTime();
             if (showTime > curTime) {
                 return true;
             } else {
                 return false;
             }
         },
         // 标记日期
         isMarkDay(y, m, d) {
             let flag = false;
             for (let i = 0; i < this.markDays.length; i++) {
                 let dy = `${y}-${m}-${d}`;
                 if (this.markDays[i] == dy) {
                     flag = true;
                     break;
                 }
             }
             return flag;
         },
         isToday(y, m, d) {
             let checkD = y + '-' + m + '-' + d;
             let today = this.getToday().date;
             if (checkD == today) {
                 return true;
             } else {
                 return false;
             }
         },
         // 展开收起
         toggle() {
             this.monthOpen = !this.monthOpen;
             this.headerBar = !this.headerBar;
             if (this.monthOpen) {
                 this.positionTop = 0;
             } else {
                 let index = -1;
                 this.dates.forEach((i, x) => {
                     this.isToday(i.year, i.month, i.date) && (index = x);
                 });
                 this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
             }
         },
         // 点击回调
         selectOne(i, event) {
			 this.content2=''
             let date = `${i.year}-${i.month}-${i.date}`;
             let selectD = new Date(date).getTime();
             let curTime = new Date().getTime();
             let week = new Date(date).getDay();
             let weekText = ['日', '一', '二', '三', '四', '五', '六'];
             let formatWeek = '星期' + weekText[week];
             let response = {
                 date: date,
                 week: formatWeek
             };
             if (!i.isCurM) {
                 // console.log('不在当前月范围内');
                 return false;
             }
             if (selectD > curTime) {
                 if (this.disabledAfter) {
                     console.log('未来日期不可选');
                     return false;
                 } else {
                     this.choose = date;
                     this.$emit('onDayClick', response);
                 }
             } else {
                 this.choose = date;
                 this.$emit('onDayClick', response);
             }
             console.log(response);
			 uni.showLoading({
			 	title: '数据加载中'
			 });
			 uni.request({
			 	
			   url: 'https://anmti.cn/canlogin/selectOnly',
			   method:"GET",
			   // header:{
			 	 //  'content-type':"application/x-www-form-urlencoded",
			   // },
			   //[{qid:1,qname:"中文",answer:[{iid:1,itemname:"2"}]}]
			   // [{"qtype":1,"qid":1,"answer":[{"iid":1,"itemname":"1.熬夜晚睡"}]}]
			   data:{
			 	  date:response.date,
			 	  },
			 	header:{
			 		"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
			 	},		
			 	// success(res){	
					// if(res.data=="500"){
					// 	this.content2="当天没有心情日记哟"
					// 	this.isShow=true
					// }else{
					// 	this.showImgx.forEach((s)=>{
					// 		s.status=false
					// 	})
					// 	this.showImgx[res.data.markindex].status=true
					// 	this.content2=res.data.content
					// 	this.isShow=false
					// 	uni.hideLoading();
					// }
			 	// }
				success: (res) => {
					console.log(res);
					if(res.data.markindex==500){
						this.content2="当天没有心情日记哟"
						this.isShow=true
						uni.hideLoading();
					}else{
						this.showImgx.forEach((s)=>{
							s.status=false
						})
						this.showImgx[res.data.markindex].status=true
						this.content2=res.data.content
						this.isShow=false
						uni.hideLoading();
						
					}
				}
			 						
			 })
         },
         //改变年月
         changYearMonth(y, m) {
              this.loadData2(y,m);
             this.y = y;
             this.m = m;
         },
         changeMonth(type){
             if(type=='pre'){
                if (this.m + 1 == 2) {
                    this.m = 12;
                    this.y = this.y - 1;
                } else {
                    this.m = this.m - 1;
                } 
             }else{
                 if (this.m + 1 == 13) {
                     this.m = 1;
                     this.y = this.y + 1;
                 } else {
                     this.m = this.m + 1;
                 }
             }
              this.loadData2(this.y, this.m);
			 console.log(this.dates)
         },
		 calenderJump(){
			 uni.navigateTo({
			 	url:'./time-calender/time-calender',
			 	animationType:'fade-in',
			 	animationDuration:1000,
			 })
		 },
		changeImg(){
			this.showImg=!this.showImg
		},
		changeImg1(){
			
			for(var i=0;i<=4;i++){
				if(i==0){
					this.showImgx[0].status=!this.showImgx[0].status
				}else{
					this.showImgx[i].status=false
				}
				
			}
		},
		changeImg2(){
			for(var i=0;i<=4;i++){
				if(i==1){
					this.showImgx[1].status=!this.showImgx[1].status
				}else{
					this.showImgx[i].status=false
				}
				
			}
		},
		changeImg3(){
			for(var i=0;i<=4;i++){
				if(i==2){
					this.showImgx[2].status=!this.showImgx[2].status
				}else{
					this.showImgx[i].status=false
				}
				
			}
		},
		changeImg4(){
			for(var i=0;i<=4;i++){
				if(i==3){
					this.showImgx[3].status=!this.showImgx[3].status
				}else{
					this.showImgx[i].status=false
				}
				
			}
		},
		changeImg5(){
			for(var i=0;i<=4;i++){
				if(i==4){
					this.showImgx[4].status=!this.showImgx[4].status
				}else{
					this.showImgx[i].status=false
				}
				
			}
		},
		async loadData1(sendsrc,content2,nowtime,key) {
			await this.getData(sendsrc,content2,nowtime,key)
			this.loadData2(this.y, this.m)
		},
		
		getData: function(sendsrc,content2,nowtime,key) {
			uni.showLoading({
				title: '数据加载中'
			});
			return new Promise((resolve, reject) => {
				uni.request({
					url: 'https://anmti.cn/canlogin/savedataw',
					method: 'GET',
					data:{
						"sendsrc":sendsrc,
						"content2":content2,
						"nowtime":nowtime,
						"key":key,
					},
					header:{
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					}
					,
					success: (res) => {
						resolve('suc');
						uni.hideLoading();
					},
					fail: (err) => {
						reject('err');
						uni.$showMsg('加载失败')
						uni.hideLoading();
					}
				})
			})
		},
		
		
		async loadData2(y,month) {
			 await this.getData2(y,month)
			 console.log("里面")
			 this.dates=this.monthDay(y,month)
		},
		
		getData2: function(year,month) {
			uni.showLoading({
				title: '数据加载中'
			});
			return new Promise((resolve, reject) => {
				uni.request({
					url: 'https://anmti.cn/canlogin/getData',
					method: 'GET',
					data:{
						"year":year,
						"month":month
					},
					header:{
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					}
					,
					success: (res) => {
						
						this.alldata=res.data
						this.isShow=false
						console.log("异步里")
						resolve('suc');
						uni.hideLoading();
					},
					fail: (err) => {
						reject('err');
						uni.$showMsg('加载失败')
						uni.hideLoading();
					}
				})
			})
			
		}

		
		
	}
 };
 </script>
 
 <style lang="scss" scoped>
 .calendar-wrapper {
     color: #fff;
     font-size: 28rpx;
     text-align: center;
     background-color: #fe6766;
     padding-bottom: 10rpx;
 	box-shadow: 0 45rpx rgba(#cf3a18,.32);
     .header{
         display: flex;
         align-items: center;
         justify-content: center;
         height: 88rpx;
         color: #fff;
         font-size: 32rpx;
         font-weight: bold;
 		.preWidth,.nextWidth {
 			background:rgba( red ,0.3);
 			width: 40rpx;
 			height: 40rpx;
 			padding: 10rpx;
 			margin: 0 20rpx;
 		}
         .pre,.next{
 			  width:0;
 			  height:0;
 			  border-top:20rpx solid transparent;
 			  border-bottom:20rpx solid transparent;
         }
         .pre{
             margin-right: 30rpx;
 			border-right:20rpx solid #fff;
 			 margin-right: 10rpx;
         }
         .next{
             margin-left: 30rpx;
 			border-left:20rpx solid #fff;
 			 margin-left: 10rpx;
         }
     }
 
     .week {
         display: flex;
         align-items: center;
         height: 80rpx;
         line-height: 80rpx;
         view {
             flex: 1;
         }
     }
 
     .content {
         position: relative;
         overflow: hidden;
         transition: height 0.4s ease;
         .days {
             transition: top 0.3s;
             display: flex;
             align-items: center;
             flex-wrap: wrap;
             position: relative;
 			
             .item {
                 position: relative;
                 display: block;
                 height: 80rpx;
                 line-height: 80rpx;
                 width: calc(100% / 7);
                 .day {
                     font-style: normal;
                     display: inline-block;
                     vertical-align: middle;
                     width: 60rpx;
                     height: 60rpx;
                     line-height: 60rpx;
                     overflow: hidden;
                     border-radius: 60rpx;
                     &.choose {
                         background-color: #fe7379;
                         color: #fff;
                     }
                     &.nolm {
                         color: #fff;
                         opacity: 0.3;
                     }
                 }
                 .isWorkDay {
                     color: #fff;
                 }
                 .notSigned {
                     font-style: normal;
                     width: 8rpx;
                     height: 8rpx;
                     background: #fa7268;
                     border-radius: 10rpx;
                     position: absolute;
                     left: 50%;
                     bottom: 0;
                     pointer-events: none;
                 }
                 .today {
                     color: #fff;
                     background-color: #a8c0ff;
                 }
                 .workDay {
                     font-style: normal;
                     width: 8rpx;
                     height: 8rpx;
                     background: #4d7df9;
                     border-radius: 10rpx;
                     position: absolute;
                     left: 50%;
                     bottom: 0;
                     pointer-events: none;
                 }
                 .markDay{
                     font-style: normal;
                     width: 8rpx;
                     height: 8rpx;
                     background: #fc7a64;
                     border-radius: 10rpx;
                     position: absolute;
                     left: 50%;
                     bottom: 0;
                     pointer-events: none;
                 }
             }
         }
     }
 
     .hide {
         height: 80rpx !important;
     }
 	.dropDown {
 	width: 50rpx;
 	height: 50rpx;
 	background-color: #fc7a64;
 }
	.weektoggle {
		width: 100rpx;
		height: 10rpx;
		position: relative;
		bottom: -55rpx;
		left: 45%;
		background-color: #fe6766;
		border-radius: 0 0 20rpx 20rpx;
		padding: 10rpx;
		image {
			width: 30rpx;
			height: 30rpx;
			}
	}
	.timebootm{
		margin-top: 50px;
		min-height: 200px;
		bottom: -100px;
	}
	.imgbootm{
		height: 20px;
		width: 20px;
	}
	.showimage{
		height: 50px;
	}
	.imgbootms{
		height: 35px;
		width: 40px;
		padding: 0px 10px;
	}
	.showtext{
		min-height: 60px;
	}
	input{
		min-height: 50px;
		background-color: #FFF5EE;
		font-size: 1em;
		color: black;
	}
 }
 
 </style>
 
